<template>
    <div class="left-content">
        <div class="square">
            <div class="title">基础组件</div>
            <draggable
                v-model="componentCommon"
                :options="sortOptions"
                :sort="false"
                @start="onDragStart"
                @end="onDragEnd"
                item-key="id"
                style="width: 100%">
                <template #item="{ element }">
                    <div class="item" @mouseover="mouseOpt($event, element)" @mouseout="mouseout($event, element)">
                        <div class="squareContent">
                            <div
                                class="imgcontent"
                                :style="`background:transparent url(${element.notActiveUrl}) center/100% no-repeat`"></div>
                            <span class="icontitle">{{ element.name }}</span>
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="square">
            <div class="title">商品组件</div>
            <draggable
                v-model="componentProuduct"
                :options="sortOptions"
                :sort="false"
                @start="onDragStart"
                @end="onDragEnd"
                item-key="id"
                style="width: 100%">
                <template #item="{ element }">
                    <div class="item" @mouseover="mouseOpt($event, element)" @mouseout="mouseout($event, element)">
                        <div class="squareContent">
                            <div
                                class="imgcontent"
                                :style="`background:transparent url(${element.notActiveUrl}) center/100% no-repeat`"></div>
                            <span class="icontitle">{{ element.name }}</span>
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="square">
            <div class="title">营销组件</div>
            <draggable
                v-model="componentMarket"
                :options="sortOptions"
                :sort="false"
                @start="onDragStart"
                @end="onDragEnd"
                item-key="id"
                style="width: 100%">
                <template #item="{ element }">
                    <div class="item" @mouseover="mouseOpt($event, element)" @mouseout="mouseout($event, element)">
                        <div class="squareContent">
                            <div
                                class="imgcontent"
                                :style="`background:transparent url(${element.notActiveUrl}) center/100% no-repeat`"></div>
                            <span class="icontitle">{{ element.name }}</span>
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="square">
            <div class="title">其他组件</div>
            <draggable
                v-model="componentOther"
                :options="sortOptions"
                :sort="false"
                @start="onDragStart"
                @end="onDragEnd"
                item-key="id"
                style="width: 100%">
                <template #item="{ element }">
                    <div class="item" @mouseover="mouseOpt($event, element)" @mouseout="mouseout($event, element)">
                        <div class="squareContent">
                            <div
                                class="imgcontent"
                                :style="`background:transparent url(${element.notActiveUrl}) center/100% no-repeat`"></div>
                            <span class="icontitle">{{ element.name }}</span>
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import draggable from 'vuedraggable';
import product from '@/assets/imgs/mall/decorate/goods.png';
import group from '@/assets/imgs/mall/decorate/group.png';
import image from '@/assets/imgs/mall/decorate/image.png';
import search from '@/assets/imgs/mall/decorate/search.png';
import seckill from '@/assets/imgs/mall/decorate/seckill.png';
import text from '@/assets/imgs/mall/decorate/text.png';
import qw from '@/assets/imgs/mall/decorate/qw.png';
import coupon from '@/assets/imgs/mall/decorate/cupon.png';
import category from '@/assets/imgs/mall/decorate/categoryopt.png';
import couponActive from '@/assets/imgs/mall/decorate/cupon-active.png';
import categoryActive from '@/assets/imgs/mall/decorate/category-active.png';
import productActive from '@/assets/imgs/mall/decorate/goods-active.png';
import groupActive from '@/assets/imgs/mall/decorate/group-active.png';
import imageActive from '@/assets/imgs/mall/decorate/image-active.png';
import searchActive from '@/assets/imgs/mall/decorate/search-active.png';
import seckillActive from '@/assets/imgs/mall/decorate/seckill-active.png';
import textActive from '@/assets/imgs/mall/decorate/text-active.png';
import qwActive from '@/assets/imgs/mall/decorate/qw-active.png';
const emit = defineEmits(['drag', 'dragEnd']);
const sortOptions = reactive({
    animation: 150,
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
    dragClass: 'sortable-drag'
});
const components = [
    {
        activeUrl: textActive,
        notActiveUrl: text,
        name: '标题文本',
        title: 'text'
    },
    {
        activeUrl: imageActive,
        notActiveUrl: image,
        name: '图片广告',
        title: 'images'
    },
    {
        activeUrl: categoryActive,
        notActiveUrl: category,
        name: '分类导航',
        title: 'category'
    }

    // {
    //     iconName: 'List',
    //     name: '富文本',
    //     title: 'edit'
    // },

    // {
    //     iconName: 'CameraFilled',
    //     name: '视频',
    //     title: 'video'
    // }
];

const componentFour = [
    {
        activeUrl: qwActive,
        notActiveUrl: qw,
        iconName: 'GoodsFilled',
        name: '添加企微',
        title: 'wecom'
    }
];
const componentsTwo = [
    {
        activeUrl: productActive,
        notActiveUrl: product,
        name: '商品',
        title: 'product'
    },

    {
        activeUrl: searchActive,
        notActiveUrl: search,
        name: '商品搜索',
        title: 'search'
    }
];
const componentsThree = [
    {
        activeUrl: groupActive,
        notActiveUrl: group,
        iconName: 'GoodsFilled',
        name: '拼团',
        title: 'groupbuy'
    },

    {
        activeUrl: seckillActive,
        notActiveUrl: seckill,
        iconName: 'Menu',
        name: '秒杀',
        title: 'seckill'
    },
    {
        activeUrl: couponActive,
        notActiveUrl: coupon,
        name: '优惠券',
        title: 'coupon'
    }
];
const componentCommon = reactive(components);
const componentProuduct = reactive(componentsTwo);
const componentMarket = reactive(componentsThree);
const componentOther = reactive(componentFour);
const mouseOpt = (event, element) => {
    let clickDom = event.currentTarget;
    let item = clickDom.querySelector('.imgcontent');
    let span = clickDom.querySelector('span');
    clickDom.style = `border:1px solid #ff6b00`;
    item.style = `background: url(${element.activeUrl}) center/100% no-repeat`;
    span.style = `color: #ff6b00`;
};
const mouseout = (event, element) => {
    let clickDom = event.currentTarget;
    let item = clickDom.querySelector('.imgcontent');
    let span = clickDom.querySelector('span');
    clickDom.style = `border:1px solid #eaeaea`;
    item.style = `background: url(${element.notActiveUrl}) center/100% no-repeat`;
    span.style = `color: #33302D`;
};
const onDragStart = e => {
    const item = e.item.__draggable_context.element;
    emit('drag', item);
};
const onDragEnd = () => {
    emit('dragEnd');
};
</script>
<style lang="scss" scoped>
.left-content {
    height: calc(100vh - 100px);
    padding: 24px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #eaeaea;
    .square {
        margin-bottom: 36px;
    }
    .title {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 500;
        color: #33302d;
        line-height: 22px;
    }
    .text {
        font-size: 14px;
        font-weight: 400;
        color: #33302d;
        line-height: 14px;
    }
    .item {
        display: inline-block;
        width: 96px;
        height: 96px;
        margin: 0 16px 16px 0;
        text-align: center;
        border-radius: 4px;
        cursor: move;
        border: 1px solid #eaeaea;
        .squareContent {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 96px;
            .icontitle {
                display: inline-block;
                font-size: 14px;
                margin-top: 15px;
            }
            .imgcontent {
                width: 36px;
                height: 36px;
            }
        }
    }
}
</style>
